<!--
 * @Author: AI Assistant
 * @Date: 2025-01-27
 * @LastEditors: AI Assistant
 * @LastEditTime: 2025-01-27
 * @FilePath: \mapbox\src\views\example\BoundaryWallExample.vue
 * @Description: 围墙边界效果示例
-->
<template>
  <div style="width: 100vw; height: 100vh; position: relative;">
    <div id="map" style="width: 100%; height: 100%;"></div>
    
         <!-- 控制面板 -->
     <div class="control-panel">
       <h3>围墙控制</h3>
       <div class="control-group">
         <label>边界颜色:</label>
         <input type="color" v-model="boundaryColor" @change="updateBoundary" />
       </div>
       <div class="control-group">
         <label>填充颜色:</label>
         <input type="color" v-model="fillColor" @change="updateBoundary" />
       </div>
       <div class="control-group">
         <label>边界透明度:</label>
         <input type="range" min="0" max="1" step="0.1" v-model="opacity" @input="updateBoundary" />
         <span>{{ opacity }}</span>
       </div>
       <div class="control-group">
         <label>填充透明度:</label>
         <input type="range" min="0" max="1" step="0.1" v-model="fillOpacity" @input="updateBoundary" />
         <span>{{ fillOpacity }}</span>
       </div>
               <div class="control-group">
          <label>围墙高度:</label>
          <input type="range" min="10" max="200" step="5" v-model="height" @input="updateBoundary" />
          <span>{{ height }}m</span>
        </div>
       <div class="control-group">
         <label>线条宽度:</label>
         <input type="range" min="1" max="10" step="1" v-model="lineWidth" @input="updateBoundary" />
         <span>{{ lineWidth }}px</span>
       </div>
       <div class="control-group">
         <label>动画速度:</label>
         <input type="range" min="0.1" max="3" step="0.1" v-model="animationSpeed" @input="updateBoundary" />
         <span>{{ animationSpeed }}x</span>
       </div>
       <div class="control-group">
         <label>
           <input type="checkbox" v-model="animated" @change="updateBoundary" />
           启用动画
         </label>
       </div>
       <div class="control-group">
         <label>
           <input type="checkbox" v-model="fill" @change="updateBoundary" />
           填充内部
         </label>
       </div>
       <div class="control-group">
         <button @click="addHefeiZooBoundary">添加动物园边界</button>
         <button @click="clearBoundaries">清除所有</button>
       </div>
     </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Map from '289-map';

// 调试：检查 Map.Graphic 是否包含 BoundaryWall
console.log('Map.Graphic 内容:', Object.keys(Map.Graphic || {}));
console.log('BoundaryWall 是否存在:', !!Map.Graphic?.BoundaryWall);

// 响应式数据
const boundaryColor = ref('#ff0000');
const fillColor = ref('#ff0000');
const opacity = ref(0.8);
const fillOpacity = ref(0.1);
const height = ref(100); // 增加默认高度到100米
const lineWidth = ref(3);
const animationSpeed = ref(1);
const animated = ref(true);
const fill = ref(true);

let map;
let boundaries = [];

onMounted(() => {
  console.log('BoundaryWallExample onMounted 开始');
  
  try {
    map = new Map('map', {
      style: 'https://api.maptiler.com/maps/basic/style.json?key=qC0veBxoTx1YwVioOuvc',
      scene: {
        center: { lng: 117.2, lat: 31.8, pitch: 45 },
        zoom: 12,
      },
      controller: ['showZoom', 'showCompass', 'globe', 'visualizePitch'],
      type: 'globe', // 使用 globe 类型，与 ThreeModelExample 保持一致
    });

    console.log('地图实例创建成功');

    map.on('load', () => {
      console.log('地图加载完成，开始添加默认边界');
      // 添加默认的合肥野生动物园边界
      addHefeiZooBoundary();
    });

    map.on('error', (error) => {
      console.error('地图加载错误:', error);
    });

  } catch (error) {
    console.error('创建地图实例失败:', error);
  }
});

// 添加合肥野生动物园边界
function addHefeiZooBoundary() {
  console.log('添加合肥野生动物园边界');
  
  // 使用五边形边界坐标进行测试
  const zooBoundaryCoords = [
    [117.15, 31.85],  // 左下
    [117.18, 31.84],  // 右下
    [117.19, 31.86],  // 右上
    [117.17, 31.88],  // 左上
    [117.15, 31.85]   // 闭合
  ];

  // 清除现有边界
  clearBoundaries();

  try {
    console.log('创建 BoundaryWall 实例，参数:', {
      positions: zooBoundaryCoords,
      height: height.value,
      color: boundaryColor.value,
      opacity: opacity.value,
      lineWidth: lineWidth.value,
      fill: fill.value,
      fillColor: fillColor.value,
      fillOpacity: fillOpacity.value,
      animated: animated.value,
      animationSpeed: animationSpeed.value,
    });

    // 创建合肥野生动物园边界
    const zooBoundary = new Map.Graphic.BoundaryWall({
      positions: zooBoundaryCoords, // 使用上面定义的坐标数组
      height: height.value, // 使用控制面板的值
      color: boundaryColor.value,
      opacity: opacity.value,
      lineWidth: lineWidth.value,
      fill: fill.value,
      fillColor: fillColor.value,
      fillOpacity: fillOpacity.value,
      animated: animated.value,
      animationSpeed: animationSpeed.value,
    });

    console.log('动物园边界实例创建成功:', zooBoundary);
    zooBoundary.render(map);
    boundaries.push(zooBoundary);
    console.log('动物园边界添加成功');
    
    // 延迟调整视角，确保边界渲染完成
    setTimeout(() => {
      // 使用动物园边界的坐标范围
      const lngs = zooBoundaryCoords.map(point => point[0]);
      const lats = zooBoundaryCoords.map(point => point[1]);
      const minLng = Math.min(...lngs);
      const maxLng = Math.max(...lngs);
      const minLat = Math.min(...lats);
      const maxLat = Math.max(...lats);
      
      console.log('动物园边界范围:', { minLng, maxLng, minLat, maxLat });
      
      // 使用 fitBounds 方法调整视角到边界可见位置
      map.fitBounds(
        [[minLng, minLat], [maxLng, maxLat]], 
        {
          padding: 50,  // 添加50像素的内边距
          duration: 1500,  // 1.5秒的动画时长
          maxZoom: 16  // 最大缩放级别限制
        }
      );
      
      console.log('视角已调整到动物园边界可见位置');
    }, 1000); // 延迟1秒确保渲染完成
    
  } catch (error) {
    console.error('添加合肥野生动物园边界失败:', error);
  }
}

// 更新边界
function updateBoundary() {
  boundaries.forEach(boundary => {
    boundary.color = boundaryColor.value;
    boundary.fillColor = fillColor.value;
    boundary.opacity = opacity.value;
    boundary.fillOpacity = fillOpacity.value;
    boundary.height = height.value;
    boundary.lineWidth = lineWidth.value;
    boundary.animationSpeed = animationSpeed.value;
    boundary.animated = animated.value;
    boundary.fill = fill.value;
    
    if (typeof boundary.render === "function" && map) {
      boundary.render(map);
    }
  });
}


// 清除所有边界
function clearBoundaries() {
  console.log('清除所有边界，当前边界数量:', boundaries.length);
  
  boundaries.forEach((boundary, index) => {
    if (boundary._threeLayerId && map.getLayer(boundary._threeLayerId)) {
      try { 
        map.removeLayer(boundary._threeLayerId); 
        console.log(`移除边界 ${index + 1}`);
      } catch (e) {
        console.error(`移除边界 ${index + 1} 失败:`, e);
      }
    }
  });
  boundaries = [];
  console.log('所有边界已清除');
}
</script>

<style scoped>
.control-panel {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(255, 255, 255, 0.95);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 250px;
  z-index: 1000;
}

.control-panel h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
}

.control-group {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-group label {
  font-size: 14px;
  color: #666;
  min-width: 80px;
}

.control-group input[type="color"] {
  width: 40px;
  height: 30px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.control-group input[type="range"] {
  flex: 1;
  min-width: 100px;
}

.control-group input[type="checkbox"] {
  margin-right: 8px;
}

.control-group button {
  background: #667eea;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  margin-right: 8px;
  transition: background-color 0.3s ease;
}

.control-group button:hover {
  background: #5a6fd8;
}

.control-group button:last-child {
  margin-right: 0;
}

.control-group span {
  font-size: 12px;
  color: #666;
  min-width: 30px;
}
</style> 